<template>
    <div class="main">
        <div class="header">
            <h2>License管理</h2>
            <div class="login">登录</div>
        </div>
        <el-tabs tab-position="left" :style="{'height': `${height}px`}">
            <el-tab-pane label="系统信息">
                <span slot="label"><i class="el-icon-chat-dot-round"></i> 系统信息</span>
                <SysInfoPage></SysInfoPage>
            </el-tab-pane>
            <el-tab-pane>
                <span slot="label"><i class="el-icon-chat-dot-round"></i> 系统环境信息</span>
                <SysEnvironment></SysEnvironment>
            </el-tab-pane>
            <el-tab-pane label="客户信息">
                <span slot="label"><i class="el-icon-chat-dot-round"></i> 客户信息</span>
                <CustomerInfo></CustomerInfo>
            </el-tab-pane>
            <el-tab-pane label="license管理">
                <span slot="label"><i class="el-icon-chat-dot-round"></i> license管理</span>
                <LicenseManage></LicenseManage>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
/**
* @description: 主页面
* @create: 2020-08-31
* @author: niuwenli
*/
import SysInfoPage from './../system-info';
import SysEnvironment from './../system-environment';
import CustomerInfo from './../customer-info';
import LicenseManage from './../license-manage';
export default {
    name: 'mainPage',
    props: {},
    components: { SysInfoPage, SysEnvironment, CustomerInfo, LicenseManage },
    data () {
        return {
            height: 0
        };
    },
    created () {
        window.addEventListener('resize', this.computedHeight);
        this.$nextTick(() => {
            this.computedHeight();
        });
    },
    methods: {
        computedHeight () {
            this.height = this.$root.$el.clientHeight - 55;
        }
    }
};
</script>
<style>
.main .el-tabs__nav-scroll {
    background: rgb(247, 249, 253);
    padding-top: 15px;
}
.main .el-tabs__content {
    padding-top: 15px;
}
.main .el-tabs__item {
    padding: 0 20px 0 10px;
}
.main .header {
    height: 52px;
    overflow: hidden;
    line-height: 52px;
    border-bottom: 1px solid rgb(255, 255, 255);
    box-shadow: rgba(29,29,31,0.1) 0px 2px 4px;
}
.main .header h2 {
   font-size: 20px;
   float: left;
   margin: 0;
   margin-left: 10px;;
}
.main .login {
    float: right;
    width: 100px;
    cursor: pointer;
    color: #409EFF;
}
</style>